/* 去掉默认效果 */
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #222;
				overflow: hidden;
				/* 取消选中 */
				user-select: none;

			}

			@keyframes rotate {
				100% {
					transform: rotateY(360deg);
				}
			}

			.perspective {
				/*子元素透视 场景深度*/
				perspective: 600px;
			}

			.wrap {
				/* 3d */
				width: 135px;
				height: 240px;
				margin: 100px auto;
				position: relative;
				/* border: 1px solid red; */
				transform: rotateX(-20deg) rotateY(0deg);
				transform-style: preserve-3d;
				z-index: 1;

			}

			.wrap img {
				display: block;
				/* 绝对定位 */
				position: absolute;
				width: 100%;
				height: 100%;
				transform: rotateY(0deg) translateZ(0px);
				background: transparent;
				box-shadow: 0 0 4px #fff;
				border-radius: 5px;

				/* webkit */
			}

			/* 照片底座 */
			.wrap p {
				width: 1200px;
				height: 1200px;
				background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
				position: absolute;
				border-radius: 50%;
				left: 50%;
				top: 100%;
				margin-left: -600px;
				margin-top: -600px;
				/* 沿着x轴按倒 */
				transform: rotateX(90deg);

				
			}
			.xin{
				border: 1px solid red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				display: none;
			}
			.xin.active30{
				display: block;
			}
			.zi{
				background-color: #222;
				color: white;
				height: 100px;
				width: 100px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 2;
				display: none;
			}
			.zi.bctive{
				display: block;
			}